<template>
  <div @click="isPosition">
    <!-- 最终使用版：商品点单列表 -->
    <!-- 商品点单页头部 -->
    <header-top>
      <div class="left" slot="left">
        <router-link to="/">
          <i class="iconfont icon-zuo"></i>
          <span>返回</span>
        </router-link>
      </div>

      <div class="right" slot="right">
        <router-link to="/store">
          <!-- <span>{{addressTitle}}</span> -->
          <!-- 先刷新一下，再操作 -->
          <span v-if="this.addressInfoNow == null || typeof this.addressInfoNow == 'object'">{{addressInfoNow.title}}</span>
          <span v-else>{{addressStore.title}}</span>
          <img src="./imgs/ditu.svg" height="30px" width="30px"/>
        </router-link>
      </div>
    </header-top>

    <!-- 搜索框 -->
    <div class="search-wrap">
      <div class="search">
        <div class="search-icon">
          <i class="iconfont icon-sousuo1"></i>          
        </div>
        <input type="text" value="" v-model="value" placeholder="有机青菜粥" />
      </div>
    </div>

    <!-- 商品内容部分 -->
    <GoodsList/>       
  </div>
</template>


<script>
// 引入vuex
import { mapState } from "vuex";
import { Dialog } from "vant";
import { MessageBox } from "mint-ui";

import HeaderTop from "../../components/HeaderTop/HeaderTop";
import GoodsList from "../../components/GoodsList/GoodsList";

export default {
  name: "ProductList",
  components: { HeaderTop, GoodsList },
  data() {
    return {
      addressStore: {}, //店铺地址
      value: ""
    };
  },
  computed: {
    ...mapState(["addressInfoNow", "isLogin", "addressTitle","cartFoods"]) //获取店铺名称
  },
  methods: {
    // 优先定位
    isPosition() {
      // 是否登录
      if (this.isLogin == null) {
        MessageBox.alert("请先登录").then(() => {
          this.$router.push("/login");
        });
      } else {
        // 是否获取定位
        if (this.addressInfoNow.title == "暂时无法获取定位") {
          Dialog.alert({
            title: "提示",
            message: "请先选择当前地址"
          }).then(() => {
            this.$router.push("/store");
          });
        }
      }
    }
  },
  mounted() {
    // 测试
    if (typeof this.addressInfoNow == "string") {
      this.addressStore = JSON.parse(this.addressInfoNow);
      console.log(this.addressStore);
    }
    // console.log(typeof this.addressInfoNow);
    // console.log(this.addressInfoNow.title);
    console.log(this.cartFoods);
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

/* 搜索框部分 */
.search-wrap {
  /* position: relative;*/
  position: fixed;
  top: 40px;
  z-index: 19;
  width: 100%;
  height: 40px;
  /* border: 2px solid #ff8c00; */
  border-bottom: 1px solid #d6d6d6;
  background-color: #fff;
  /* padding: 2px 5px; */
  /* border-radius: 15px; */
}
.search-wrap > .search {
  position: absolute;
  border: 2px solid #ff8c00;
  border-radius: 15px;
  width: 98%;
  height: 30px;
  margin: 3px 5px;
  overflow: hidden;
}
.search-wrap .search-icon {
  position: absolute;
  color: #a9a9a9;
  left: 8px;
}
.search-icon::after {
  content: "";
  display: block;
  height: 16px;
  border: 1px solid #cccccc;
  position: absolute;
  right: -8px;
  top: 4px;
}
.search-wrap input {
  height: 26px;
  width: 100%;
  margin-left: 42px;
  border: none;
}
.search-wrap input::placeholder {
  color: #a9a9a9;
  font-size: 14px;
}

/* 商品内容部分 */
/* 左侧导航部分 */
.content {
  position: relative;
  top: 75px;
  /* background-color: greenyellow; */
  margin-top: 5px;
}
.content .left {
  position: fixed;
  overflow-y: scroll;
  /* float: left; */
  left: 0;
  top: 80px;
  bottom: 55px;
  width: 25%;
  /* background-color: #ffd700; */
}
</style>